<template>
  <div>
    <!-- <div id="bigBox" style="display:flex">
        <span id="give">抽奖名单，共选中{{num}}位参与抽奖</span>
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <div class="duoxuankuang" style="display:inline">
          <el-checkbox-group v-model="list" @change="handleChange">
            <el-checkbox v-for="(dange,index) in list" :label="dange" :key="index">{{dange.name}}</el-checkbox>
          </el-checkbox-group>
        </div>
    </div>-->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>抽奖设置</span>
        <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
      </div>
      <div class="text item ccc">
        <span>抽奖名称：</span>
        <el-input v-model="prize" placeholder="请输入抽奖名称"></el-input>
        <span>抽奖说明：</span>
        <el-input type="textarea" :rows="2" placeholder="请输入奖项目说明" v-model="explain"></el-input>
        <div>抽奖名单</div>
        <!-- <span>当前选中{{num}}名成员参与抽奖</span> -->
        <div class="listBox">
          <el-transfer
            class="transfer"
            v-model="value"
            :data="transferData"
            :titles="['抽奖池', '抽奖名单']"
          ></el-transfer>
        </div>
         <hr style="height:1px;border: none;border-top:1px solid #ddd;margin:15px 0;" />
      <span>设置中奖人数：</span>
      <el-input-number v-model="num1" :min="1" :max="value.length" label="描述文字"></el-input-number>

        <el-button class="start" type="primary" @click="SubmitList">提交开奖设置</el-button>
      </div>
      <el-form ref="form" :model="form" label-width="160px" class="form">
        <el-form-item label="新增抽奖池人员">
          <el-input v-model="form.name" placeholder="新增人员姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">添加抽奖人员</el-button>
          <!-- <el-button>取消</el-button> -->
        </el-form-item>
      </el-form>
     
      <!-- <el-button class="start" type="primary" @click="SubmitNum">设置抽奖人数</el-button> -->
      <hr style="height:1px;border: none;border-top:1px solid #ddd;margin:15px 0;" />
      <div class="resList">
        <el-button type="primary" @click="SubmitNum">点我开奖</el-button>
        <!-- <el-button type="start" @click="open">查看上次中奖名单</el-button> -->
      </div>
    </el-card>
  </div>
</template>

<script>
import { myfunc } from "../../@/strArray";
const cityOptions = ["上海", "北京", "广州", "深圳"];
export default {
  name: "lottery",
  data() {
    return {
      prize: "",
      explain: "",
      num: 3,
      // max: 5,
      num1: 1,
      transferData: [],
      value: [1, 3, 5, 6, 7],
      form: {
        name: ""
      }
    };
  },
  methods: {
    onSubmit() {
      this.$axios
        .get(`/spider/random/addRandom?name=${this.form.name}`)
        .then(res => {
          if (res.data.messageModel.code == 0) {
            this.$message.success(res.data.messageModel.messageText);
            this.getTransfer();
            this.form.name = "";
          } else {
            this.$message.error(res.data.messageModel.messageText);
          }
        });
      // this.getTransfer()
    },
    SubmitNum() {
        this.$axios.get(`/spider/random/likeRandom?`).then(res => {
          let str = res.data.resData;
          // window.console.log(res)
          this.$alert(str, "中奖名单", {
          confirmButtonText: "确定",
          callback: action => {
            window.sessionStorage.setItem("likeRandom", str);
          }
        });
        })
    },
    SubmitList() {
      if(!(this.prize&&this.explain)) {
        this.$message.error("请填入完整抽奖设置")
        return false
      }

      this.$axios
        .get(`/spider/random/updateRandom?name=${this.value.toString()}`)
        .then(res => {
          if (res.data.messageModel.code == 0) {
            // this.max = this.value.length;
            this.$axios.get(`/spider/random/startRandom?num=${this.num1}&roster=${this.value.toString()}&explains=${this.explain}&prize=${this.prize}`)
            this.$message.success("提交成功");
          }
        });
    },
    getTransfer() {
      this.$axios.get(`/spider/random/selRandom`).then(res => {
        if (res.data.messageModel.code == 0) {
          let value = [];
          let data = [];
          let allData = res.data.dataModel;
          window.console.log(allData);
          allData.map((item, index) => {
            data.push({
              key: item.name,
              label: item.name,
              disabled: false
            });
            if (item.choice) value.push(item.name);
          });
          this.transferData = data;
          this.value = value;
          this.max = this.value.length;
        }
      });
    }
  },
  created() {
    this.getTransfer();
  }
};
</script>

<style lang="scss">
.form {
  width: 400px;
  display: inline-block;
}
.el-transfer-panel {
  display: inline-block;
  width: 600;
}
.ccc {
  display: inline-block;
  width: 600px;
  background-color: #eee;
}
.listBox {
  padding: 30px;
}
.start {
  margin-left: 15px;
}
.resList {
  height: 400px;
  // background-color: red;
}
</style>